<template>
  <form @submit.prevent="add()">
    <legend>添加英雄</legend>
    <div class="form-group">
      <label>英雄名称</label>
      <input v-model="hero.heroName" type="text" class="form-control" />
    </div>
    <div class="form-group">
      <label>英雄性别</label>
      <div>
        <input type="radio" value="男" v-model="hero.gender"> 男
        <input type="radio" value="女" v-model="hero.gender"> 女
      </div>
    </div>
    <button class="btn btn-primary">提交</button>
  </form>
</template>

<script>
// import axios from 'axios'
export default {
  data () {
    return {
      // 表单数据对象(属性需要和后台接口字段名称保持一致)
      hero: {
        heroName: '',
        gender: '男'
      }
    }
  },
  methods: {
    add () {
      // 后台其实需要三项数据 heroName gender cTime（ID在后台自增）
      const data = { cTime: new Date(), ...this.hero}
      // 发送添加请求
      this.$http.post('heroes',data).then(()=>{
        // 成功：跳转列表
        this.$router.push('/hero')
      }).catch(()=>{
        // 失败
        alert('添加失败')
      })
    }
  }
};
</script>
